<template>
	<view class="container">
		<view class="choose-img-list">
			<view
				class="choose-img-item"
				:style="'width: ' + width + 'rpx;height: ' + height + 'rpx;'"
				@tap="chooseImg"
				:data-index="index"
				v-for="(item, index) in showImgPath"
				:key="index"
			>
				<image :src="item" :class="'choose-img ' + (round ? 'round' : '')" />

				<image @tap.stop.prevent="clearChoose" class="del" :data-index="index" :src="delImg" />
			</view>
			<view @tap="chooseImg" :style="'width: ' + width + 'rpx;height: ' + height + 'rpx;'" v-if="imgCount != 0" class="choose-img-item">
				<image :src="commonPhotoImg" :class="'choose-img ' + (round ? 'round' : '')" />
			</view>
		</view>
	</view>
</template>

<script>
import { OBSupload } from '@/pagesA/utils/upload.js';
import { common } from '@/pagesA/utils/common.js';
// import delImg from '@/pagesA/assets/image/del.png';
// import commonPhotoImg from '@/pagesA/assets/image/upload-pic-icon.png';
const app = getApp();
export default {
	data() {
		return {
			imgCount: 1,
			showImgPath: [],
			filePath: [],
			delImg: common.imgs.delImg,
			commonPhotoImg: common.imgs.commonPhotoImg,
			uploading: false
		};
	},
	props: {
		imgPath: {
			type: Array,
			default: () => []
		},
		max: {
			type: Number,
			default: 1
		},
		width: {
			type: Number,
			default: 112
		},
		height: {
			type: Number,
			default: 112
		},
		round: {
			type: Boolean,
			default: false
		}
	},

	watch: {
		filePath: function () {
			this.$emit('chooseimg', {
				detail: {
					showImgPath: this.showImgPath,
					filePath: this.filePath
				}
			});
		},
		imgPath: {
			handler: function (value) {
				this.showImgPath = value;
				this.imgCount = value.length >= this.max ? 0 : this.max - value.length;
			},
			immediate: true,
			deep: true
		}
	},
	/**
	 * 组件的方法列表
	 */
	methods: {
		handlePageShow() {
			if (!uni.getStorageSync('cisdiHwConfig')) {
				common.commonMethods.getOBSConfig();
			}
		},
		chooseImg(e) {
			if (this.uploading) {
				return;
			}
			this.uploading = true;
			const index = e.currentTarget.dataset.index;
			uni.chooseMedia({
				count: index == undefined ? this.imgCount : 1,
				mediaType: ['image'],
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
				camera: 'back',
				success: (res) => {
					this.uploading = false;
					if (index == undefined) {
						//新增
						this.uploadPic(res.tempFiles);
					} else {
						//修改
						uni.showLoading({
							title: '上传中'
						});
						OBSupload(res.tempFiles[0].tempFilePath, (data) => {
							this.showImgPath[index] = res.tempFiles[0].tempFilePath;
							this.filePath[index] = data.url;
							this.showImgPath = Object.assign({}, this.showImgPath);
							this.filePath = Object.assign({}, this.filePath);
							uni.hideLoading();
						});
					}
				},
				fail: () => {
					this.uploading = false;
				}
			});
		},

		uploadPic(fileArr) {
			if (!Array.isArray(fileArr)) {
				return;
			}
			if (fileArr.length == 0) {
				// this.setData({
				// 	showImgPath: this.showImgPath,
				// 	filePath: this.filePath,
				// 	imgCount: this.max - this.showImgPath.length
				// });
				this.imgCount = this.max - this.showImgPath.length;
				uni.hideLoading();
				return;
			}
			let file = fileArr[0].tempFilePath;
			uni.showLoading({
				title: '上传中'
			});
			OBSupload(file, (data) => {
				this.showImgPath.push(file);
				this.filePath.push(data.url);
				fileArr.splice(0, 1);
				this.uploadPic(fileArr);
			});
		},

		clearChoose(e) {
			const index = e.currentTarget.dataset.index;
			this.showImgPath.splice(index, 1);
			this.filePath.splice(index, 1);
			// this.setData({
			// 	showImgPath: this.showImgPath,
			// 	filePath: this.filePath,
			// 	imgCount: this.max - this.showImgPath.length
			// });
			this.imgCount = this.max - this.showImgPath.length;
		}
	},

	created: function () {}
};
</script>
<style>
.choose-img-list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.choose-img-item {
	border-radius: 6rpx;
	position: relative;
	margin-right: 24rpx;
	margin-top: 24rpx;
}

.choose-img {
	width: 100%;
	height: 100%;
}

.choose-img-item .del {
	width: 32rpx;
	height: 32rpx;
	position: absolute;
	right: -15rpx;
	top: -15rpx;
}

.round {
	border-radius: 6rpx;
}
</style>
